<!--
 * @Descripttion:大区城市门店
 * @Author: caijj
 * @Date: 2020-12-03 15:14:54
 * @LastEditors: caijj
 * @LastEditTime: 2021-03-22 17:02:55
-->
<template>
  <BasicLayout>
    <template #wrapper>
      <el-page-header class="header" @back="goBack">
        <div slot="content" class="header-container">
          <span>{{ title }}</span>
          <multiple-download
            class="multiple-down"
            :loading="$attrs.exporting"
            @onExport="onExportReport"
          />
        </div>
      </el-page-header>
      <table-pagination
        ref="table"
        :key="tableKey"
        :show-summary="showSummary"
        :summary-method="getSummaries"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNo"
        border
        @handlePaginationChange="onPaginationChange"
      >
        <div slot="operate-btn-bar" />
      </table-pagination>
    </template>
  </BasicLayout>
</template>
<script>
import TablePagination from '@/components/common/TablePagination';
import exportReportMixin from '@/components/mixins/ExportReport';
import tableSummariesMixin from '@/components/mixins/TableSummaries';
import MultipleDownload from '@/components/common/MultipleDownload';
import { getReportCityDetail, shopReportDetail, exportReportByType } from '@/api/retailApi';
import { getDetailsTotal } from '@/api/retailApi';
import { columnsCity, columnsShop } from './columnsConfig.js';
import { exportFile } from '@/utils/tools';
import { mapGetters } from 'vuex';

export default {
  name: 'KAliveCityEditionDetails',
  components: {
    TablePagination,
    MultipleDownload
  },
  mixins: [exportReportMixin, tableSummariesMixin],
  data() {
    return {
      // columns: [],
      tableData: [],
      loading: false,
      exporting: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableKey: 0
    };
  },
  computed: {
    ...mapGetters(['retailForm']),
    title() {
      return `${this.retailForm.name}-零销售详情`;
    },
    columns() {
      return this.retailForm.type === 'shop' ? columnsShop : columnsCity;
    }
  },
  mounted() {
    this.onSearchReport();
  },
  methods: {
    /* 分页查询 */
    onPaginationChange({ current = 1, size = 10 } = {}) {
      this.pageSize = size;
      this.pageNo = current;
      this.onSearchReport();
    },
    /* 导出报表 */
    onExportReport(downType) {
      this.exporting = true;
      exportReportByType({
        ...this.retailForm,
        downType,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then((res) => {
        const fileName = `${this.title}${Date.now()}${
          downType === 0 ? '.xlsx' : '.csv'
        }`;
        exportFile(res, fileName);
        this.exporting = false;
      });
    },
    /* 查询报表 */
    onSearchReport() {
      this.loading = true;
      this.tableData = [];
      const params = {
        ...this.retailForm,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      const api = this.retailForm.type === 'shop' ? shopReportDetail : getReportCityDetail;
      api(params)
        .then(({ data, current, resultCode, pages, total }) => {
          if (resultCode === '0000') {
            this.tableData = data;
            this.total = total;
            this.pageNo = current;
            this.pageSize = pages;
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
      // 来源tableSummariesMixin
      this.getRetailDetailsTotal(params, getDetailsTotal);
    },
    goBack() {
      this.$router.go(-1);
      // 返回清除缓存
      this.$store.dispatch('retail/clearParentForm');
    }
  }
};
</script>
<style lang="scss" scoped>
  .header {
    position: relative;
    margin: 20px 0;
  }
  .multiple-down {
    position: absolute;
    right: 0px;
    top: -5px;
  }
</style>
